<template>
    <t-table
      :data="data"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @page-change="onPageChange"
    >
      <template #status="{ row }">
        <t-tag v-if="row.status === 0" theme="danger" variant="light">未生效</t-tag>
        <t-tag v-if="row.status === 1" theme="success" variant="light">生效中</t-tag>
        <t-tag v-if="row.status === 2" theme="warning" variant="light">已过期</t-tag>
      </template>

      <template #paymentType="{ row }">
        <t-tag v-if="row.paymentType === 1" theme="success">收款</t-tag>
        <t-tag v-if="row.paymentType === 2" theme="warning">付款</t-tag>
      </template>

      <template #type="{ row }">
        <t-tag v-if="row.type === 1">主合同</t-tag>
        <t-tag v-if="row.type === 2">子合同</t-tag>
        <t-tag v-if="row.type === 3">补充合同</t-tag>
      </template>

      <template #op="{ row }">
        <t-space>
          <t-link theme="primary" @click="handleEdit(row)">编辑</t-link>
          <t-link theme="danger" @click="handleDelete(row)">删除</t-link>
        </t-space>
      </template>
    </t-table>
  </template>

  <script setup lang="ts">
  import { computed } from 'vue';
  import type { PrimaryTableCol, TableRowData } from 'tdesign-vue-next';
  import type { ContractInfo } from '@/api/contract';

  const props = defineProps<{
    data: ContractInfo[];
    loading: boolean;
    pagination: {
      current: number;
      pageSize: number;
      total: number;
    };
  }>();

  const emit = defineEmits(['page-change', 'edit', 'delete']);

  const columns = computed<PrimaryTableCol[]>(() => [
    {
      title: '合同名称',
      colKey: 'name',
      width: 200,
    },
    {
      title: '合同类型',
      colKey: 'type',
      width: 120,
    },
    {
      title: '收付类型',
      colKey: 'paymentType',
      width: 120,
    },
    {
      title: '合同金额',
      colKey: 'amount',
      width: 120,
      align: 'right',
    },
    {
      title: '甲方',
      colKey: 'partyA',
      width: 160,
    },
    {
      title: '乙方',
      colKey: 'partyB',
      width: 160,
    },
    {
      title: '签订日期',
      colKey: 'signDate',
      width: 120,
    },
    {
      title: '生效日期',
      colKey: 'startDate',
      width: 120,
    },
    {
      title: '结束日期',
      colKey: 'endDate',
      width: 120,
    },
    {
      title: '状态',
      colKey: 'status',
      width: 100,
    },
    {
      title: '操作',
      colKey: 'op',
      width: 160,
      fixed: 'right',
    },
  ]);

  const handleEdit = (row: ContractInfo) => {
    emit('edit', row);
  };

  const handleDelete = (row: ContractInfo) => {
    emit('delete', row);
  };

  const onPageChange = (pageInfo: { current: number; pageSize: number }) => {
    emit('page-change', pageInfo);
  };
  </script>
